<template>
  <div  id="scienceCheck">
    <div class="myRow">
      <div class="col-lg-12">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h3 class="h3">发展性素质测评</h3>
          </div>
          <div class="panel-body">
            <div class="table-responsive">
              <table class="table table-striped table-bordered table-hover" id="dataTables">
                <thead>
                <tr>
                  <th>姓名</th>
                  <th>申报内容</th>
                  <th>申报时间</th>
                  <th>申报分数</th>
                  <th>申报文件</th>
                  <th>是否批准</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for='record in records'>
                  <td>{{record.studentName}}</td>
                  <td>{{record.content}}</td>
                  <td>{{record.createAt| formatDate}}</td>
                  <td>{{record.num}}</td>
                  <td class="center">
                    <span class="glyphicon glyphicon-folder-open" @click="picture($event)" :data-file="record.file" :data-id="record.id"></span>
                  </td>
                  <!--后台默认全部同意-->
                  <td>
                    <p class="" v-show = "record.approve == 0">未审核</p>
                    <p class="" v-show="record.approve == 1">已同意</p>
                    <p class="" v-show="record.approve == -1">未同意</p>
                  </td>
                </tr>
                </tbody>
              </table>
            </div>
          </div>
          <!-- /.panel-body -->
        </div>
        <!-- /.panel -->
      </div>
      <!-- /.col-lg-12 -->
    </div>
    <!-- /.row -->
    <div class="modal fade" id="update" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h4 class="modal-title" id="myModalLabel">信息审核</h4>
          </div>
          <div class="modal-body">
            <img :src="shower" alt="" width="100%">
            <p  v-show=" shower == undefined ">图片未上传</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal" id="close">关闭</button>
            <button class="btn btn-success btn-sm" @click="agree($event)" :data-id="checkId">同意</button>
            <button class="btn btn-danger btn-sm" @click="disagree($event)" :data-id="checkId" >不同意</button>
            <input type="text" v-model="reason" placeholder="请仅在不同意时填写">
          </div>
        </div>
        <!-- /.modal-content -->
      </div>
      <!-- /.modal -->
    </div>
    <!--一个虚拟点击事件-->
    <button id = 'virtualButton' @click="doModal()" type="button" style="display: none">123</button>
  </div>
</template>


<script>
  /*
  *
  * 审核
  *
  * */
  import '../assets/js/jquery.dataTables'
  import '../assets/js/dataTables.bootstrap'
  import {formatDate} from '../config/date'
  import '../../node_modules/bootstrap/dist/js/bootstrap.min'
  import API from '../config/request'
  import {decodeData} from '../config/base64'

  export default {
    name : 'scienceCheck',
    data () {
      return {
        url: API.URL,
        records: [],
        shower : '',
        checkId: '',
        reason: '',
        classId: ''
      }
    },
    created() {
      this.classId = decodeData(localStorage.getItem('classId'))
      if(decodeData(localStorage.getItem('identity')) == 0){
        this.getAllRecord()
      }else if(decodeData(localStorage.getItem('identity')) == 2){
        this.getRecordByClassId()
      }

    },
    methods : {
      getAllRecord : function () {
        this.$http.get(this.url + 'development/getAll').then(function (response) {
          this.records = response.body
          console.log(this.records)
        })
      },
      getRecordByClassId : function () {
        this.$http.get(this.url + 'development/findbyclass?classId='+this.classId).then(function (response) {
          this.records = response.body
        })
      },
      agree: function (event) {
        let id = event.target.getAttribute('data-id') //拿到id
        this.$http.post(this.url+'develop_Approve/approve',
          {
            devId : id ,
            approve: 1
          },
          {emulateJSON: true}
        ).then(function (response) {
          console.log(response)
          if(response.body.code == 0){
            alert("批准成功")
            for(let i in this.records){
              if(this.records[i].id == id){
                this.records[i].approve = 1
              }
            }
            $('#close').click()
          }
        },function () {
          alert("提交失败")
        })
      },
      disagree: function (event) {
        let id = event.target.getAttribute('data-id') //拿到id
        this.$http.post(this.url+'develop_Approve/feedback',
          {
            id : id ,
            feedback: this.reason
          },
          {emulateJSON: true}
        ).then(function (response) {},function () {
          alert("不同意理由评价提交失败")
        })
        this.$http.post(this.url+'develop_Approve/approve',
          {
            devId : id ,
            approve: -1
          },
          {emulateJSON: true}
        ).then(function (response) {
          console.log(response)
          if(response.body.code == 0){
            alert("提交成功")
            for(let i in this.records){
              if(this.records[i].id == id){
                this.records[i].approve = -1
              }
            }
            $('#close').click()
          }
        },function () {
          alert("提交失败")
        })
      },
      picture: function (event) {
        this.shower = event.target.getAttribute('data-file')
        this.checkId = event.target.getAttribute('data-id')
        $('#virtualButton').click()
      },
      doModal(){
        $('.modal').modal('toggle');
      }
    },
    mounted(){
      setTimeout(function () {
          $('#dataTables').DataTable({})
      }, 500)
      /*
      *
      * 以后可能会出现bug ，设置监听
      *
      * */
    },
    filters:{
      formatDate(data){
        return formatDate(data, 'yyyy-MM-dd')
      }
    }

  }

</script>

<style scoped>
  @import "../../node_modules/bootstrap/dist/css/bootstrap.min.css";
  @import "../assets/font-awesome-4.1.0/css/font-awesome.min.css";
  table.dataTable thead .sorting_asc:after {
    content: "\f0de";
    float: right;
    font-family: fontawesome;
  }

  table.dataTable thead .sorting_desc:after {
    content: "\f0dd";
    float: right;
    font-family: fontawesome;
  }

  table.dataTable thead .sorting:after {
    content: "\f0dc";
    float: right;
    font-family: fontawesome;
    color: rgba(50,50,50,.5);
  }
  .myRow{
    width: 100%;
  }
  table{
    width:550px;
  }
  @media screen and (min-width: 768px){
    table{
      width: 100%;
    }
  }

</style>
